<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" sizes="any" mask="" href="../static/img/boxicon.png">


    <title>Depot仓储后台管理系统 | 注册</title>


    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <!-- Font Awesome -->
    <!-- Ionicons -->
    <!-- Theme style -->
    <!-- iCheck -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
    <link href="../../static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../static/plugins/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../../static/plugins/adminLTE/css/AdminLTE.css" rel="stylesheet">
    <link href="../../static/plugins/iCheck/square/blue.css" rel="stylesheet">

    <style>
        body{
            background: url("../static/img/background.jpg") no-repeat center center;
            background-size: 100% 100%;
        }
    </style>
</head>

<body class="hold-transition">
<div class="login-box">
    <div class="login-box-body" style="border-radius: 20px">
        <div class="login-logo">
            <a href="/index/frontData"><b>Depot仓储</b><br>后台管理系统</a>
        </div>
        <!-- /.login-logo -->
        <p class="login-box-msg">注册仓库实例</p>

        <div style="font-size: large;font-weight: bold;margin-bottom: 10px">新建管理员账户</div>
        <form action="/user/login" method="post">
            <div class="form-group has-feedback">
                <label for="username">管理员名称</label>
                <input class="form-control" id="username" name="username" placeholder="请输入管理员名称" type="text">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="password">管理员密码</label>
                <input class="form-control" id="password" name="password" placeholder="请输入管理员密码" type="password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="confirmPassword">确认密码</label>
                <input class="form-control" id="confirmPassword" name="confirmPassword" placeholder="请再次输入一遍相同的密码" type="password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <button class="btn btn-primary btn-block btn-flat" onclick="register()" type="button">注册</button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <a class="pull-left" style="margin-top: 10px" href="loginPage.html">< 返回登录页面</a>
                </div>
            </div>
        </form>

    </div>
    <!-- /.login-box-body -->
    <div>
        <p class="alert alert-danger hide" id="message" style="border-radius: 20px">message</p>
    </div>
</div>
<!-- /.login-box -->

<!-- jQuery 2.2.3 -->
<!-- Bootstrap 3.3.6 -->
<!-- iCheck -->
<script src="../../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../static/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../../static/plugins/iCheck/icheck.min.js"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });
</script>
<script>
    let message =document.getElementById("message");
    function register() {
        let username = document.getElementById("username");
        let password = document.getElementById("password");
        let confirmPassword = document.getElementById("confirmPassword");
        if(username.value===""){
            message.innerText="管理员名称不得为空";
            message.setAttribute("class","alert alert-danger");
        }else if(password.value==="") {
            message.innerText="管理员密码不得为空";
            message.setAttribute("class","alert alert-danger");
        }else if(confirmPassword.value==="") {
            message.innerText="确认密码不得为空";
            message.setAttribute("class","alert alert-danger");
        }else if(password.value!==confirmPassword.value) {
            message.innerText="两次输入的密码不一致";
            message.setAttribute("class","alert alert-danger");
        } else{
            message.setAttribute("class","alert alert-danger hidden");
            $.ajax({
                url: "/user/register",
                type: "post",
                contentType: 'application/json',
                data: JSON.stringify({
                    "username": username.value,
                    "password": md5("repo" + password.value + "depot")
                }),
                success: function (msg) {
                    if (msg['status'] === 200) {
                        let leftsecond = 5;
                        message.innerText="注册成功，"+leftsecond+"秒后自动跳转到登陆页面";
                        message.setAttribute("class","alert alert-success");
                        setInterval(()=>{
                            leftsecond--;
                            message.innerText="注册成功，"+leftsecond+"秒后自动跳转到登陆页面";
                        },1000);
                        setTimeout(()=>{
                            window.location.href = '/loginPage.html'
                        },5000);
                    } else {
                        message.innerText = msg['error'];
                        message.setAttribute("class", "alert alert-danger");
                    }
                },
            });
        }
    }
</script>
</body>

</html>